<template>
	<view class="cu-modal bottom-modal" :class="{'show':isShow}" @click="hide">
		
	
		<view class="cu-dialog">
			<view class="goods-data">
				<view class="thumb">
					<image src="https://axhub.im/pro/bb1f7bd347952764/images/%E9%A6%96%E9%A1%B5/u640-0.png" mode="">
					</image>
				</view>
				<view class="item">
					<view class="title">
						<text></text>
					</view>
					<view class="price">
						<text class="min">￥</text>
						<text class="max">299</text>
						<text class="min">.00</text>
					</view>
					<view class="inventory">
						<text>库存：3000</text>
					</view>
				</view>
			</view>
			<view class="attr-size">


				<view class="attr-list" v-for="(item,index) in attrs" :key="index">
					<view class="title">
						<text>{{item.attrName}}</text>
					</view>
					<view class="size-list">
						<div class="list" v-for="(value,idx) in item.attrValues" :class="[classObject(index,idx)]"
							@click.stop="onAttr(item,value,index,idx)" :key="idx">
							<text>{{value.attrValue}}</text>
						</div>
					</view>
				</view>
				<view class="attr-number" @click.stop="onStop">
					<view class="tit">数量</view>
					<view class="number">
						<u-number-box v-model="buynums" :min="1" @change="valChange"></u-number-box>
					</view>
				</view>
			</view>
			<view class="attr-btn">
				<view class="add-cart"  @click="onConfirm(BuyType)">加入购物车</view>
				<view class="confirm" @click="onConfirm(BuyType)">确定</view>
			</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				skuid: '1',
				buynums: 1,
				attrs: [{
						"attrId": 4,
						"attrName": "颜色",
						"attrValues": [{
								"attrValue": "流光幻镜",
								"skuIds": "1,2,3"
							},
							{
								"attrValue": "钛空银",
								"skuIds": "7,8,9"
							},
							{
								"attrValue": "霓影紫",
								"skuIds": "4,5,6"
							}
						],
						"selectId": 0,
					},
					{
						"attrId": 6,
						"attrName": "套餐",
						"attrValues": [{
								"attrValue": "套餐一",
								"skuIds": "3,6,9"
							},
							{
								"attrValue": "套餐三",
								"skuIds": "2,5,8"
							},
							{
								"attrValue": "套餐二",
								"skuIds": "1,4,7"
							}
						],
						"selectId": 2,
					}
				],

			};
		},
		created() {
			this.attrs.forEach((item, index) => {
				item.attrValues.forEach((i, j) => {
					if (i.skuIds.split(",").indexOf("4") != -1) {
						this.attrs[index].selectId = j
					}
				})

			})
		},
		computed: {
			classObject() {
				return function( idx, index) {
					return this.methodGetByteLen( idx, index)
				}
			}
		},
		methods: {
			methodGetByteLen( index, idx) {

				if (this.attrs[index].selectId == idx) {
					return "action"
				}


			},

			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			/**
			 * 显示 
			 * @param {Number} type 1 点击选择 2 加入购物 3 立即购买
			 */
			show() {
			
				this.isShow = true;
			},
			hide() {
				this.isShow = false;
			},
			onStop() {

			},
			/**
			 * 属性选择点击
			 */


			onAttr(item, value, index, idx) {


			
				this.attrs[index].selectId = idx
				let demo = []
				
				this.attrs.forEach(item => {
					demo.push(item.attrValues[item.selectId].skuIds.split(","))
				})
				


				var arr2 = demo.reduce(function(a, b) {
					return a.concat(b)
				});
				console.log(arr2);

				Array.prototype.duplicate = function() {
					var tmp = [];
					this.concat().sort().sort(function(a, b) {
						if (a == b && tmp.indexOf(a) === -1) tmp.push(a);
					});
					return tmp;
				}

				arr2.duplicate().forEach(item => {
					this.skuid = item
				})





			},
			/**
			 * 确认点击
			 */
			onConfirm() {
			
			console.log(this.skuid);
				// this.$u.api.addCartItem({
				// 	skuId: this.skuid,
				// 	num: this.buynums
				// }).then(res => {
				// 	console.log(res);
				// })
				// uni.navigateTo({
				// 	url: '/pages/ConfirmOrder/ConfirmOrder'
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'GoodsAttr.scss';
</style>
